<div class="expend_container">
    <div class="expend_header" onclick="toggleContent(this)">
        <div class="info">{{$label}}</div>
        <div class="button toggleButton"><i class="feather icon-chevrons-down"></i></div>
    </div>
    <div class="expend_content content">
        {!! $html !!}
    </div>
</div>
<style>
    .expend_container {
        width: 100%;
        margin-bottom: 7px;
        border: 1px solid #e6e8e7;
    }
    .info{
        font-size: 0.9rem;
        font-weight: bold;
        color: #c20202;
    }
    .expend_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        background-color: #e6e8e7;
        line-height: 25px;
        padding: 5px;
    }

    .expend_content {
        display: block;
        padding: 10px;
    }

    .button {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #ea5455;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
</style>
<script>
    function toggleContent(obj) {
        var content = $(obj).siblings('div.content');
        var button = $(obj).children('div.toggleButton');

        if (content.css('display') === "none") {
            content.css('display','block');
            button.html('<i class="feather icon-chevrons-down"></i>');
        } else {
            content.css('display','none');
            button.html('<i class="feather icon-chevrons-up"></i>');
        }
    }
</script>

